<template>
	<view class="homeLayout pageBg">
		<custom-nav-bar title="推荐"></custom-nav-bar>
		<view class="banner">
			<swiper indicator-active-color="#fff" circular autoplay indicator-dots indicator-color="rgba(255,255,255,0.5)">
				<swiper-item v-for="item in bannerList" :key="item._id">
					
					<navigator v-if="item.target == 'miniProgram' "
					 :url="`item.url`"
					  class="like"
					  target="miniProgram"
					  :app-id="item.appid"
					  >
						<image :src="item.picurl" mode="aspectFill"  style="width: 450px;height: 200px;"></image>
						
					</navigator>
					
					<navigator  :url="`/pages/classlist/classlist?${item.url}`" class="like">
						<!-- <view class="">{{item.picurl}}</view> -->
						<image :src="item.picurl" mode="aspectFill" style="width: 400px;height: 200px;"></image>
						<!-- <image src="D:/桌面/cdd/微信小程序/壁纸后端/xpxserver/uploads/HomeBanner/c57edd84-3638-4a4a-8784-dad0f7a3e577.jpg" mode="" style="width: 100px;height: 50px;"></image> -->
					</navigator>
				<image src="D:/桌面/cdd/微信小程序/壁纸后端/xpxserver/uploads/HomeBanner/c57edd84-3638-4a4a-8784-dad0f7a3e577.jpg" mode="" style="width: 100px;height: 50px;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20"></uni-icons>
				<text class="text">公告</text>
				<image src="D:/桌面/cdd/微信小程序/壁纸后端/xpxserver/uploads/HomeBanner/c57edd84-3638-4a4a-8784-dad0f7a3e577.jpg" mode="" style="width: 100px;height: 50px;"></image>
			</view>
			<view class="center">
				<swiper vertical autoplay interval="1500" duration="300" circular>
					<swiper-item v-for="item in noticeList" :key="item._id">
						<navigator :url="'/pages/notice/detail?id='+item._id">
							欢迎来到小螃蟹壁纸
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>
		</view>
		<view class="select">
			<common-title>
				<template #name>每日推荐</template>
				<template #custom>
					<view class="date">
						<uni-icons type="calendar" size="20" ></uni-icons>
						<view class="text">
							<uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
						</view>
					</view>
				</template>
			</common-title>
			<view class="content">
				<scroll-view scroll-x>
					<view class="box" 
					v-for="item in randomList" 
					:key="item._id" 
					@click="goPreview(item._id)">
						<image :src="item.smallPicurl" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="theme">
			<common-title>
				<template #name>专题精选</template>
				<template #custom>
					<navigator url="/pages/classfy/classfy" open-type="reLaunch" class="more">More+</navigator>
				</template>
			</common-title>
			
			<view class="content">
				<theme-item v-for="item in classifyList"
				 :key="item._id"
				 :item="item"
				 ></theme-item>
				<theme-item :isMore="true"></theme-item>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue'
import {onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"
// import {apiGetBanner,apigetDatyRandom,apigetNotice,apigetClassify,wallpapers} from "@/api/apis.js"
import {wallpapers,banners} from "@/api/apis.js"

// import { log } from 'console'
// import {usePromise} from '@/utils/request.js'
const bannerList = ref([])
const randomList = ref([])
const noticeList = ref([])
const classifyList = ref([])
const getwallpapers = async () => {//等于getClassify
	let res = await wallpapers()
		console.log('公告88999',res);
	   classifyList.value = res.data
}
getwallpapers()

const getBanner = async ()=> {
	console.log('4444444');
    let res = await banners()
	console.log('sssssssssss',res);
	console.log('res的值');
	bannerList.value = res.data
}

getBanner()
console.log('dcsdsd',bannerList)

// const getBanner = async ()=> {
// 	console.log('4444444');
//     let res = await apiGetBanner()
// 	console.log('sssssssssss',res);
// 	console.log('res的值');
// 	bannerList.value = res.data
// }
// getBanner()
// // usePromise()

// const getDatyRandom = async()=> {
// 	console.log('2222222');
// 	let res = await apigetDatyRandom()
// 	console.log('sm:',res);
// 	console.log('9999999');
// 		randomList.value = res.data
// }
// getDatyRandom()

// //壁纸咨询公告列表
// const getNotice = async()=>{
// 	let res = await apigetNotice({select:true})
// 	console.log('公告',res);
//     noticeList.value = res.data
// }
// getNotice()

// const getClassify = async ()=> {
// 	let res = await apigetClassify({
// 		select:true
// 	})
// 	console.log('1233444:',res)
// 	classifyList.value = res.data
// 	console.log(res);
// }
// getClassify()

// const getwallpapers = async () => {
//     try {
//         let res = await wallpapers({ select: true })
//         console.log('loopback2334:', res)
//         if (res.success) {
//             // 成功处理
//             // classifyList.value = res.data
//         } else {
//             console.warn('接口返回失败:', res.error)
//         }
//     } catch (err) {
//         console.error('请求出错:', err)
//     }
// }
// getwallpapers()


// //每日推荐跳转方法
// const goPreview = (id)=> {
// 	uni.setStorageSync("storgClassList",randomList.value)
// 	uni.navigateTo({
// 		url:"/pages/preview/preview?id="+id 
// 	})

// }


// //分享给好友
// onShareAppMessage((e)=>{
// 	// console.log(e,'eeeeee');
// 	return {
// 		title:"小螃蟹壁纸",
// 		// path:'/pages/index/index'
// 		path:'/pages/classfy/classfy'
// 	}
// })

// //分享朋友圈
// onShareTimeline(()=>{
// 	return {
// 		title:'小螃蟹壁纸',
// 		// imageUrl:'https://imgoss.ilive.cn/image/202504/16/1744776999288_365x204.png.jpg'
// 	    imageUrl:'/static/images/logo2.jpg'
// 	}
// })

</script>

<style lang="scss" scoped>
.homeLayout{
	.banner{
		width: 750rpx;
		padding:30rpx 0;
		swiper{
			wodth:750rpx;
			height: 340rpx;
			&-item{
				width:100%;
				height:100%;
				padding:0 30rpx;
				.like{
					width:100%;
					height:100%;
					image{
						width:100%;
						height:100%;
						border-radius:10rpx;
					}
				}
				
			}
		}
		
	}
	.notice{
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #f9f9f9;
		margin: 0 auto;
		border-radius: 80rpx;
		display: flex;
		.left{
			width: 160rpx;
			display:flex;
			align-items: center;
			justify-content:center;
			:deep(){
				.uni-icons{
					color:$brand-theme-color !important;
				}
			}
			
			.text{
				color:$brand-theme-color;
				font-weight: 600;
				font-size: 28rpx;
				
			}
		}
		.center{
			flex: 1;
			swiper{
				height: 100%;
				&-item{
					height:100%;
					font-size: 30rpx;
					color:#666;
					overflw:hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
		.right{
			width: 70rpx;
			display:flex;
			align-items: center;
			justify-content:center;
		}
	}
	.select{
		
		padding-top:50rpx;
		.date{
			color:$brand-theme-color;
			display: flex;
			align-items: center;
			:deep(){
				.uni-icons{
					color:$brand-theme-color !important;
				}
			}
			.text{
				margin-left: 5rpx;
			}
		}
		.content{
			width:720rpx;
			margin-left: 30rpx;
			margin-top:30rpx ;
			scroll-view{
				white-space: nowrap;
				.box{
					width: 220rpx;
					height: 430rpx;
					display: inline-block;
					margin-right: 15rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
				.box:last-child{
					margin-right: 30rpx;
				}
			}
		}
	}
	.theme{
		padding: 50rpx 0;
		.more{
			fonts-size:32rpx;
			color:#888;
			
		}
		.content{
			margin-top: 30rpx;
			padding:0 30rpx;
			display: grid;
			//网格布局中间间距
			gap:15px;
			//每一行展示3个，1fr平均分布
			grid-template-columns: repeat(3,1fr);
		}
	}
}
</style>
